<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">部门管理</div>
          <el-input
            v-model="classSearchInput"
            placeholder="请输入部门名称"
            style="width: 150px"
            class="className"
          ></el-input>
          <div style="position: relative;">
            <el-button @click="handleSearch" class="search">搜索</el-button>
            <img src="../../assets/images/搜索.png" class="searchImg" alt="">
          </div>
        </div>
        <div class="header-right">
            <img src="../../assets/images/加号.png" class="addmsg" @click="handleAdd" />
        </div>
      </div>
    </div>

    <div class="class-content">
        <div class="depart" v-for="item in departData" :key="item.departmentId">
            <div class="depart-row1">
                <div class="modify" @click="handleModify(item)">修改</div>
                <div class="del" @click="handleDelete(item)">删除</div>
            </div>
            <div class="depart-title">{{ item.departmentName }}</div>
        </div>
    </div>
       <!-- 添加部门 -->
       <el-dialog v-model="dialogVisible" title="添加部门" width="400px" :show-close="false">
      <el-form :model="formData" :rules="rules" ref="formRef"  hide-required-asterisk>
          <el-row class="row">
                <el-form-item prop="departmentName">
                    <el-input class="center-placeholder" v-model="formData.departmentName" placeholder="请输入部门名称"  ></el-input>
                </el-form-item>
          </el-row>
      </el-form>
      <template #footer>

            <el-button @click="dialogVisible = false" class="cancel">取消</el-button>
            <el-button  @click="handleConfirm" class="confirm">确认</el-button>
       
      </template>
    </el-dialog>
    <!-- 修改部门 -->
    <el-dialog v-model="modifyDialogVisible" title="修改部门" width="400px" :show-close="false">
      <el-form :model="modifyFormData" :rules="updatarules" ref="modifyFormRef" hide-required-asterisk>
        <el-row class="row">
          <el-form-item prop="departmentName">
            <el-input
              class="center-placeholder"
              v-model="modifyFormData.departmentName"
              placeholder="请输入部门名称"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="modifyDialogVisible = false" class="cancel">取消</el-button>
        <el-button @click="handleModifyConfirm" class="confirm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>
    
  <script setup>
import { ref,onMounted } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import { getDepartment,addDepartment,updateDepartment,deleteDepartment} from '../api/Department'

//数据
const departData = ref([])

// 搜索内容
const classSearchInput = ref('')
//搜索
const handleSearch = () => {
  fetchData(classSearchInput.value)
}

//获取数据
function fetchData(search) {
  let data = {
    search,
  }
  getDepartment("departmentList",data).then((res) => {
    if (res.code === 200) {
      departData.value = res.dataset.departmentList; 
    }
  })
}
// 页面加载时获取数据
onMounted(() => {
  fetchData(classSearchInput.value) 
})


// 新增：模态框显示状态
const dialogVisible = ref(false)
// 新增：表单数据
const formData = ref({
    departmentName: '',
})
// 新增：表单引用
const formRef = ref(null)
// 新增：表单验证规则
const rules = ref({
  departmentName: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } 
  ]
})

// 新增：点击添加部门按钮方法
const handleAdd = () => {
  if (formRef.value) {
    formRef.value.clearValidate(); 
  }
  dialogVisible.value = true
}
// 新增：点击确认按钮方法
const handleConfirm = () => {
  // 提交表单逻辑
  formRef.value.validate((valid) => {
    if (valid) {
      // 提交表单数据
      const data = {
        departmentName: formData.value.departmentName,
      }
      addDepartment("addDepartment",data).then((res) => {
        if (res.code === 200) {
          ElMessage.success('添加成功');
          dialogVisible.value = false;
          //清空输入框
          formData.value.departmentName = '';
          fetchData(classSearchInput.value)
        }
      })
      
    }
  })
}



// 修改：模态框显示状态
const modifyDialogVisible = ref(false);
// 修改：表单数据
const modifyFormData = ref({
  departmentName: '',
  departmentId: '',
});
// 修改：表单引用
const modifyFormRef = ref(null);
// 修改：点击修改按钮方法
const oldDepartment = ref('')
const handleModify = (item) => {
  // 填充表单数据
  
  modifyFormData.value = { ...item };
  oldDepartment.value = item.departmentName;
  modifyDialogVisible.value = true;
};
//修改接口
function updateDepartmentInfo(){
  let data = {
    departmentName: modifyFormData.value.departmentName,
    departmentId: modifyFormData.value.departmentId,
    oldDepartment:oldDepartment.value,
  }
  updateDepartment("updateDepartment",data).then((res) => {
    if (res.code === 200) {
      ElMessage.success('修改成功');
      modifyDialogVisible.value = false;
      fetchData(classSearchInput.value)
    }
  })
}
// 修改：表单验证规则
const updatarules = ref({
  departmentName: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ]
});

// 修改：点击确认按钮方法
const handleModifyConfirm = () => {
  modifyFormRef.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm(
        '确定要修改该部门吗？',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        // 用户点击确定，执行修改操作
        updateDepartmentInfo() 
      }).catch(() => {
        // 用户点击取消，不执行操作
        ElMessage.info('已取消修改')
      })
    } else {
      ElMessage.error('请输入正确的部门名称');
    }
  });
};

// 删除接口
function deleteDepartmentInfo(departmentId){
  let data = {
    departmentId,
  }  
  deleteDepartment("deleteDepartment",data).then((res) => {
    if (res.code === 200) {
      ElMessage.success('删除成功');
      fetchData(classSearchInput.value)  
    } 
  })
}

// 删除操作
const handleDelete = (item) => {
    ElMessageBox.confirm(
    '确定要删除该部门吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 用户点击确定，执行删除操作
    deleteDepartmentInfo(item.departmentId)
  }).catch(() => {
    // 用户点击取消，不执行操作
    ElMessage.info('已取消删除')
  })
};


</script>
    
  <style scoped>

.class {
  width: 90%;
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* 头部左侧 */
.header-left {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.line {
  width: 2px;
  height: 20px;
  background-color: #007bff;
}
.title {
  padding-left: 10px;
  font-size: 20px;
  margin-right: 20px;
}
.className {
  margin-right: 10px;
}
:deep(.className .el-input__wrapper){
  border-radius: 12px !important;
}

.search {
  background-color: #0f6ab1;
  color: #fff;
  border: none;
  margin-left: 10px;
  border-radius: 16px;
  padding: 0;
  padding-right: 15px;
  padding-left: 36px;
}
.searchImg {
  position: absolute;
  top: 8px;
  left: 25px;
}
/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.addmsg {
  width: 25px;
  height: 25px;
  cursor: pointer; 
}
/* 表格区域 */
.class-content {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0,0);
}
.depart {
  width: 150px;
  height: 150px;
  margin-top: 20px;
  margin-right: 11px;
  background-color: #fff;
  border-radius: 25px;
   /*阴影  */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
  /* 过渡时间 */
  transition: transform 0.3s ease;
}
.depart:hover {
   /*移动  */
  transform: translateY(-5px);
}
.depart-row1 {
  display: flex;
  margin-top: 10px; 
  /* 右对齐 */
  justify-content: flex-end;
  font-size: 15px;
}
.depart-row1 div {
  margin-left: 10px;
  margin-right: 10px;
  cursor: pointer; 
}
.depart-row1 div:hover {
  color: #0f6ab1; 
}
.modify{
  /* 绿色 */
  color: #29a34e;
}
.del{
  color: #e83844;
}
.depart-title {
  margin-top: 31px;
  text-align: center;
  font-size: 20px; 
}

/* 模态框 */
:deep(.el-overlay .el-overlay-dialog) {
  position: absolute;
}
:deep(.el-overlay) {
  position: absolute;
}
:deep(.el-dialog) {
  padding: 0px;
  width: 800px;
}
:deep(.el-dialog header span) {
  display: inline-block;
  width: 100%;
  background-color: #0f6ab1;
  height: 40px;
  color: white;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
}
:deep(.el-dialog__footer){
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
:deep(.el-dialog__footer button){
    background-color: #0f6ab1;
    color: white;
}
/* 添加 */
.row{
    display: flex;
    justify-content: center;
}
:deep(.center-placeholder input) {
  text-align: center !important;
  height: 50px !important;
  width: 400px;
}
</style>